<template>
  <el-breadcrumb>
    <el-breadcrumb-item>统计数据管理</el-breadcrumb-item>
    <el-breadcrumb-item>AQI空气质量指数超标趋势统计</el-breadcrumb-item>
  </el-breadcrumb>
  <el-alert
    title="AQI空气质量指数超标趋势统计"
    type="success"
    effect="dark"
    :closable="false"
    style="width: 80%; margin: 20px 0"
  />

  <div class="container">
    <div class="block">
      <el-date-picker
          v-model="value3"
          type="year"
          placeholder="选择需求年份"
      />
    </div>

  <!-- 折线图展示 -->
  <div class="chart-box">
    <v-chart :option="lineOption" autoresize style="height: 350px;" />
  </div>
  <div class="table-box">
    <el-table
      :data="aqiTrendTotalArr"
      :cell-style="{ padding: '4px' }"
      empty-text="无数据"
      style="width: 100%"
    >
      <el-table-column label="序号">
        <template #default="scope">
          {{scope.$index+1}}
        </template>
      </el-table-column>
      <el-table-column prop="month" label="月份" />
      <el-table-column prop="total" label="AQI空气指数指数超标数量" />
    </el-table>
  </div>
  </div>
</template>

<script setup>
import {ref, inject, computed, watch, onMounted} from "vue";
import { use } from "echarts/core";
import VChart from "vue-echarts";
import { LineChart } from "echarts/charts";
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";

use([LineChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, CanvasRenderer]);

const axios = inject("axios");

// 年份的获取
const value3 = ref(ref(new Date(2025, 0, 1))); // 确保是 ref
const aqiTrendTotalArr = ref([]);


const lineOption = computed(() => ({
  title: {
    text: "AQI空气质量指数超标趋势",
    left: "center"
  },
  tooltip: {
    trigger: "axis"
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true
  },
  xAxis: {
    type: "category",
    data: aqiTrendTotalArr.value.map(item => item.month),
    boundaryGap: false
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      name: "超标数量",
      type: "line",
      data: aqiTrendTotalArr.value.map(item => item.total),
      smooth: true,
      symbol: "circle",
      symbolSize: 8,
      lineStyle: {
        color: "#1976d2",
        width: 3
      },
      itemStyle: {
        color: "#1976d2"
      },
      areaStyle: {
        color: "rgba(33, 150, 243, 0.1)"
      }
    }
  ]
}));

const init = () => {
  if (!value3.value) {
    console.log('未选择年份');
    return;
  }
  const year = value3.value.getFullYear();
  console.log('当前选择的年份:', year);

  axios.get("statistics/listAqiTrendTotalStatis", {
    params: { year: year }  // Axios 会自动拼接到 URL
  })
      .then((response) => {
        aqiTrendTotalArr.value = response.data;
      })
      .catch((error) => {
        console.error('请求出错:', error);
      });
};

// 监听 value3 的变化
watch(value3, (newVal) => {
  console.log('监听到年份变化:', newVal);
  init();
});

// 页面加载时自动请求 2025 年数据
onMounted(() => {
  init();
});

</script>

<style scoped>
.chart-box {
  width: 80%;
  margin: 20px 0 0 0px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px #f0f1f2;
  padding: 20px 0;
}
.table-box {
  width: 80%;
  height: 450px;
  overflow: auto;
  margin-top: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px #f0f1f2;
  padding-bottom: 20px;
}
</style>